How to make separate angular material stepper header and content?

Ask Time：2019-02-26T20:18:33 Author：Sergio Fuentes

I am doing a vertical stepper with angular material. The thing is that this stepper puts the content of each step below the step header, so if there are many steps it looks awfull because you have to scroll.

My idea is to separate the headers from the content so it will look more like a sidenav but with the angular material functionality.

Here you there is what i have by now: actual stepper where the content appears below the header

And here there is what i want wanted stepper where the content is in the center of the page and the steps headers in the side

I have tried by editing the headers like this:

mat-step-header{
  display: flex ;
  justify-content: flex-end ;
}

But it isn't working.

Author:Sergio Fuentes，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/54885429/how-to-make-separate-angular-material-stepper-header-and-content

GreedyAi :

I am not sure if this works same on stepper, but I did similar thing on tabs.\nI used service to exchange data between components. If you use the content and header in same place you could try to have 2 steppers.\n\n1 for header and second for content. You should be able to hide header for second tab and content for first tab. On first tab you can use selectedIndex bound to a variable in typescript. So that once you change the variable it will go to that step. to change the variable you can make a function selectionChange that will take step event from the header-stepper and change the variable. From what I saw stepper is similar to tabs. so this should work. Hope this helps.\n\nheader stepper\n(selectionChange)=\"selectionChange($event)\"\n\ncontent stepper\n[(selectedIndex)]=\"selectedIndex\"",

2019-02-26T13:37:14

How to make separate angular material stepper header and content?